<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>小游戏</title>
</head>
<style>
    canvas{
        border:1px solid #999;
        margin:auto;
    }
</style>
<body onload="init()">
<canvas id="canvas" height="400" width="650">
浏览器不支持
</canvas>
</body>
</html>

<script>
    function init(){
        var canvas = document.getElementById("canvas")
        if(!canvas.getContext){
            return
        }
        var ctxt = canvas.getContext('2d')
        var img = new Image();
        img.src = './img/xue.jpg'
        img.onload = function(){
            imgSlid()
        }
        var y = 0;
        function imgSlid(){
        ctxt.save()
        ctxt.clearRect(0,0,canvas.width,canvas.height)
        ctxt.translate(0,y)
        ctxt.drawImage(img,0,0);
        ctxt.drawImage(img,0,canvas.height*-1)
        y ++;
        if(y>=canvas.height){
            y = 0;
        }
        ctxt.restore()
        window.requestAnimationFrame(imgSlid)
    }

        function Ball(x,y,r,speedX,speedY,color){
            this.x = x;
            this.y = y;
            this.r = r;
            this.speedX = speedX;
            this.speedY = speedY;
            this.color = color;
        }
        Ball.prototype.draw = function(){
            ctxt.beginPath();
            ctxt.fillStyle = this.color;
            ctxt.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctxt.fill()
        }
        Ball.prototype.move = function(){
            this.y += this.speedY

            if(this.y>canvas.height-this.r){
                console.log('miss')
            }else if(this.y<this.r){
                console.log('隐藏')
            }
        }


        function randomsX(){
            //x  0~650-r
            console.log(Math.round(Math.random()*8+2));
            var colorR = Math.round(Math.random()*255);
            var colorG = Math.round(Math.random()*255);
            var colorB = Math.round(Math.random()*255);
            var color = "rgb("+colorR+","+colorG+","+colorB+")"
            var r = Math.round(Math.random()*8+5)
            var max = 650-r;
            var min = r;
            var rX = Math.floor(Math.random()*(max-min))+min;
            var speedY = Math.round(Math.random()*10);
            var ballObj = {};
            ballObj.x = rX;
            ballObj.r = r;
            ballObj.color = color;
            ballObj.speedY = speedY;
            return ballObj;
        }


        var arr = []
        for(var i = 0; i < 20; i ++){
            var obj = randomsX();
            arr.push(obj)
            }

        var nameArr = []
        var newArr = []
        for(var i = 0; i < 10; i ++){
            var balls = 'ball'+i

            balls = new Ball(arr[i].x,obj.r,arr[i].r,0,arr[i].speedY,arr[i].color)
            console.log('ball'+i)
            balls.draw();
            balls.move()
            nameArr.push('ball'+i)
            newArr.push(balls)
        }
        console.log(nameArr)
        console.log(newArr)
        for(var i = 0; i < 10; i ++){
            nameArr[i] = newArr[i]
        }
        // var ball = new Ball(obj.x,obj.r,obj.r,0,obj.speedY,obj.color)
        // console.log(ball)
        // var ball1 = new Ball(arr[0].x,obj.r,arr[0].r,0,arr[0].speedY,arr[0].color)
        // var ball2 = new Ball(arr[1].x,obj.r,arr[1].r,0,arr[1].speedY,arr[1].color)
        // var ball3 = new Ball(arr[2].x,obj.r,arr[2].r,0,arr[2].speedY,arr[2].color)
        // var ball4 = new Ball(obj.x,0,obj.r,0,obj.speedY,obj.color)
        //     ball.draw();
        //     ball.move()
        //     ball1.draw();
        //     ball1.move()
        //     ball2.draw();
        //     ball2.move()

        // console.log(obj)

        // var obj = randomsX();
        // var ball = new Ball(obj.x,0,obj.r,0,obj.speedY,obj.color)
        // ball.draw();
        // ball.move()

        var y = 0;
            function animate() {
                ctxt.save()
                ctxt.clearRect(0,0,canvas.width,canvas.height)
                ctxt.translate(0,y);
                for(var i = 0; i < 10; i ++){
                    var balls = 'ball'+i
                    console.log(nameArr[i])
                    nameArr[i].draw()
                    nameArr[i].move()
                    // ball.draw()
                    // ball.move()
                }
                y ++;
                if(y>=canvas.height){
                    y = 0;
                }
                ctxt.restore()
                window.requestAnimationFrame(animate)
            }


// var y = 0;
//         function animate(){
//             // for(var i = 0; i < 20; i ++){
//                 ctxt.clearRect(0,0,canvas.width,canvas.height)
//             ctxt.translate(0,y)
//             y++;
//                 if(y>canvas.height){
//                     y = 0
//                 }
//                 console.warn(y)
//                 // var obj = randomsX();
//                 // var ball = new Ball(obj.x,0,obj.r,0,obj.speedY,obj.color)
//             for(var i = 0; i < 10; i ++){
//                 var balls = 'ball'+i
//                 console.log(nameArr[i])
//                 nameArr[i].draw()
//                 nameArr[i].move()
//                 // ball.draw()
//                 // ball.move()
//             }
//             // ball.draw()
//             // ball.move()
//             // ball1.draw()
//             // ball1.move()
//             // ball2.draw()
//             // ball2.move()
//     // window.requestAnimationFrame(animate)
//
//         }
        animate()
        setInterval(animate, 100);

    }
</script>

